<style scoped>
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 24px 32px;
  margin-bottom: 32px;
  border-radius: 16px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

.form-item {
  width: 187px;
  margin: 0 8px;
}

.reset {
  color: #ff5d47;
}

.search-btn {
  background-color: #ff4949;
  color: #fff;
}

.active {
  background-color: #000;
  color: #fff;
}

.table {
  width: 100%;
  border-radius: 16px;
  margin: 16px 0;
}

.color-g {
  color: #19cc8e;
}

.color-r {
  color: #ff5d47;
}

.see {
  color: #ff5d47;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #5f6a7f;
  justify-content: space-between;
}

.row span {
  color: #191c1f;
  font-size: 14px;
}
.addrow {
  color: #606266;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}
</style>

<template>
  <div>
    <div class="search-box">
      用户名称:
      <el-input
        size="large"
        class="form-item"
        v-model="searchParam.name"
        placeholder="请输入"
      />
      <!-- 用户ID:
      <el-input
        size="large"
        class="form-item"
        v-model="searchParam.id"
        placeholder="请输入"
      ></el-input>
      账户状态:
      <el-select
        size="large"
        class="form-item"
        v-model="searchParam.status"
        placeholder="请选择"
      >
        <el-option label="启用" value="1" />
        <el-option label="停用" value="2" />
      </el-select> -->
      <el-button size="large" class="reset" @click="reset" text>重置</el-button>
      <el-button size="large" class="search-btn" @click="search"
        >搜寻</el-button
      >
      <div style="flex: 1"></div>
      <el-button
        size="large"
        class="search-btn"
        @click="
          showAdd = true;
          editData = {};
        "
        >+ 新建用户</el-button
      >
    </div>
    <el-table :data="dataList" class="table" size="large">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="account" label="名称" />
      <el-table-column prop="email" label="邮箱地址" />
      <el-table-column prop="name" label="最近登陆时间" />
      <el-table-column prop="validStatus" label="账户状态">
        <template #default="scope">
          <div :class="scope.row.validStatus == 1 ? `color-g` : 'color-r'">
            {{ scope.row.validStatus == 1 ? "启用" : "停用" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-button size="small" text @click="edit(scope.row)" class="see">
              查看
            </el-button>
            <el-icon @click="del(scope.row)">
              <Delete />
            </el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="dataTotal"
      class="mt-4"
      :page-size="pageSize"
      :current-page="page"
      @size-change="changeSize"
      @current-change="changePage"
      :page-sizes="[20, 50, 100]"
    />
    <el-dialog v-model="showEdit" title="用户详情" width="400">
      <div class="row">
        用户名称
        <span>{{ editData.account }}</span>
      </div>
      <div class="row">
        用户电邮
        <span>{{ editData.email }}</span>
      </div>
      <div class="row">
        用户ID
        <span>{{ editData.id }}</span>
      </div>
      <div class="row">用户密码</div>
      <el-input
        style="margin-bottom: 12px"
        v-model="editData.password"
      ></el-input>
      <div class="row">用户状态</div>
      <el-radio-group v-model="editData.validStatus">
        <el-radio :value="1" size="large">启用</el-radio>
        <el-radio :value="2" size="large">禁用</el-radio>
      </el-radio-group>
      <template #footer>
        <div>
          <el-button type="primary" @click="editing"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showAdd" title="用户详情" width="400">
      <div class="addrow">用户名称</div>
      <el-input
        style="margin-bottom: 12px"
        v-model="editData.account"
      ></el-input>
      <div class="addrow">用户电邮地址</div>
      <el-input style="margin-bottom: 12px" v-model="editData.email"></el-input>
      <div class="addrow">用户密码</div>
      <el-input
        style="margin-bottom: 12px"
        v-model="editData.password"
      ></el-input>
      <template #footer>
        <div>
          <el-button type="" @click="showAdd = false"> 取消 </el-button>
          <el-button type="primary" @click="adding"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "userList",
  data() {
    return {
      showAdd: false,
      searchParam: {
        id: "",
        status: "",
        type: 1,
      },
      dataList: [],
      page: 1,
      pageSize: 20,
      dataTotal: 0,
      editData: {},
      showEdit: false,
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    async adding() {
      if (!this.editData.account) {
        ElMessage.error("请输入用户名称");
        return;
      }
      if (!this.editData.email) {
        ElMessage.error("请输入用户邮箱");
        return;
      }
      if (!this.editData.password) {
        ElMessage.error("请输入用户登录密码");
        return;
      }
      const loading = ElLoading.service();
      const res = await request.POST(
        "/sys/sys_user/create-account",
        this.editData
      );
      loading.close();
      if (res.status == 100100) {
        ElMessage.success("添加成功");
        this.getDataList();
        this.showAdd = false;
      } else {
        ElMessage.error(res.message);
      }
    },
    async del(query) {
      ElMessageBox.confirm(
        `你确定要删除教师邮箱为${query.email}的账号吗？`,
        "删除账号",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          draggable: true,
        }
      )
        .then(async () => {
          const res = await request.POST("/sys/sys_user/teacher/delete", {
            userId: query.id,
          });
          if (res.status == 100100) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            this.getDataList();
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch(() => {});
    },
    async editing() {
      const params = {
        userId: this.editData.id,
        validStatus: this.editData.validStatus,
      };
      if (this.editData.password) {
        params.password = this.editData.password;
      }
      const loading = ElLoading.service();
      const res = await request.PUT("/sys/sys_user/teacher/change", params);
      loading.close();
      if (res.status == 100100) {
        this.getDataList();
        this.showEdit = false;
        ElMessage.success("操作成功！");
      } else {
        ElMessage.error(res.message);
      }
    },
    edit(query) {
      this.editData = { ...query };
      this.showEdit = true;
    },
    changePage(page) {
      console.log(page);
      this.page = page;
      this.getDataList();
    },
    changeSize(size) {
      console.log(size);
      this.pageSize = size;
      this.page = 1;
      this.getDataList();
    },
    changeType(query) {
      this.page = 1;
      this.searchParam.type = query.value;
      this.getDataList();
    },
    search() {
      this.page = 1;
      this.getDataList();
    },
    reset() {
      this.searchParam = {
        id: "",
        status: "",
        type: 1,
      };
      this.page = 1;
      this.getDataList();
    },
    async getDataList() {
      const loading = ElLoading.service();
      const res = await request.GET("/sys/sys_user/teacher/page", {
        pageNum: this.page,
        pageSize: this.pageSize,
        name: this.searchParam.name,
        id: this.searchParam.id,
        validStatus: this.searchParam.status,
      });
      loading.close();
      // if (res.status == 100100) {
      this.dataList = res.results;
      this.dataTotal = res.count;
      // }
    },
  },
};
</script>
